<template>
  <a-form-model
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        style="width: 100%;"
    >
        <a-form-model-item prop="email">
            <a-input
                v-model.trim="form.email"
                size="large"
                placeholder="请输入邮箱"
                :maxLength="50"
                class="phone-input"
            >
                <a-icon slot="prefix" type="mail" />
            </a-input>
        </a-form-model-item>
        <div style="display: flex">
            <a-form-model-item prop="verificationCode">
                <a-input
                    v-model.trim="form.verificationCode"
                    size="large"
                    placeholder="请输入验证码"
                    :maxLength="4"
                >
                </a-input>
            </a-form-model-item>
            <a-form-model-item style="margin-left: 20px;">
                <a-button
                    type="primary"
                    :disabled="!!smsCount"
                    class="captach-type"
                    @click="onGetEmailCheckCode"
                >
                    {{ smsCount ? `${smsCount}s` : "发送邮箱验证码" }}
                </a-button>
            </a-form-model-item>
        </div>
        <div style="padding-top: 10px">
          <a-button @click="cancel">取消</a-button>
          <a-button @click="doConfirm" style="margin-left: 10px;" type="primary">确定</a-button>
        </div>
    </a-form-model>
</template>

<script>
import cloneDeep from "lodash.clonedeep"
import Regex from "@/utils/regex"
import { commonValidate } from "@/utils/util"
import {
  sendPersonelEmail
} from "@/services/user";
import {
  SMS_TYPE,
  CERTIFICATION_TYPE_MAP,
  ACCOUNT_TYPE_MAP
} from "@/config/const"
import {
  countDownInterval,
  browserTabChangeHandler,
  browserTabChangeListener
} from '@/utils/count-down'
import { personelSmsCache } from '../config'

export default {
  name: "emailChange",
  components: {},
  props: {
    type: {
      type: String,
      default: ''
    },
    cancel: {
      type: Function,
      default: () => () => {}
    },
    confirm: {
      type: Function,
      default: () => () => {}
    }
  },
  data() {
    return {
      form: {
        email: '',
        verificationCode: '',
        cerificationType: CERTIFICATION_TYPE_MAP.modifyEmail
      },
      rules: {
        email: [
          {
            required: true,
            trigger: "blur",
            validator: this.onCheckEmail
          }
        ],
        verificationCode: [
          {
            required: true,
            trigger: "blur",
            validator: this.onCheckCode
          }
        ]
      },
      smsCount: 0, // sms短信验证码倒计时
      smsTimer: null // 定时器
    }
  },
  mounted() {
    countDownInterval(this, false, personelSmsCache) // 倒计时处理
    browserTabChangeListener(true, this) // 监听tab
  },
  destroyed() {
    browserTabChangeListener(false, this) // 移除监听tab
  },
  methods: {
    // 校验邮箱
    onCheckEmail(rule, value, callback) {
      if (!value) {
        callback('请输入邮箱')
        return;
      }
      if (!Regex.email.test(value)) {
        callback('请输入正确格式的邮箱')
        return;
      }
      callback()
    },
    // 校验验证码
    onCheckCode(rule, value, callback) {
      if (!value) {
        callback('请输入验证码')
        return;
      }
      if (!Regex.verificationCode.test(value)) {
        callback('请输入正确格式的验证码')
        return;
      }
      callback()
    },
    // 发送邮箱验证码
    async onGetEmailCheckCode() {
      const phoneValidateResult = await commonValidate(this.$refs.ruleFormRef, 'email')
      if (!phoneValidateResult) return
      const params = cloneDeep(this.form)
      params.accountType = ACCOUNT_TYPE_MAP.email
      params.smsType = SMS_TYPE.if
      params.expireTime = 1 // 过期时间
      delete params.verificationCode
      const { data: { code, message } } = await sendPersonelEmail(params);
      if (code !== 200) {
        this.$message.warning(message);
        return
      }
      countDownInterval(this, true, personelSmsCache); // 倒计时处理
    },
    async doConfirm() {
      const confirmValidate = await commonValidate(this.$refs.ruleFormRef)
      if (!confirmValidate) return
      this.confirm(this.form)
    },
    // tab变化监听
    browserTabChangeHandler() {
      browserTabChangeHandler(this, personelSmsCache)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
